<template>
  <div class="list container">
    <wj-page-back content="在线接口"/>
    <wj-title title="接口列表"/>
    <ul>
      <li v-for="item in interfaceList" :key="item.id" @click="handleClick(item.link)" class="item">
        <div class="left">
          <img :src="item.icon" alt="">
        </div>
        <div class="right">
          <p class="space-1">{{item.title}}</p>
          <p style="text-align: right">{{item.createTime}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import wjPageBack from "@/components/wj-page-back";
  import wjTitle from "@/components/wj-title";
  import {interfaceList} from "@/mock-data/interfaceList";
  import {scrollAnimation} from "@/utils/scroll";

  export default {
    name: "Interface",
    data() {
      return {
        interfaceList
      }
    },
    components: {
      wjPageBack,
      wjTitle
    },
    methods: {
      handleClick(link) {
        this.$router.push({
          path: link
        })
      }
    },
    created() {
      scrollAnimation(window.scrollY, 0);
    }
  }
</script>

<style scoped>
  .list {
    padding-top: 62px;
    min-height: 100vh;
  }

  ul {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
  }

  .item {
    width: 30%;
    margin: 10px;
    padding: 15px 20px;
    display: flex;
    border: 3px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
  }

  .item:hover {
    box-shadow: 2px 2px 18px rgba(0, 0, 0, .3);
    transition: all 0.4s;
  }

  .item .left {
    margin-right: 20px;
  }

  .item .right {
    flex: 1;
  }
</style>